import { useEffect, useState } from 'react'
const url = 'http://geek.itheima.net/v1_0/channels'
function App() {
  const [list, setList] = useState([])
  const [count, setCount] = useState(0)
  // 1. 没有依赖项，初始+组件更新时调用
  useEffect(() => {
    // 无依赖项
    console.log('副作用函数执行了1')
  })
  // 2.依赖项为[],只在初始化时调用
  useEffect(() => {
    async function getList() {
      const res = await fetch(url)
      const listjson = await res.json()
      console.log(list)
      setList(listjson.data.channels)
    }
    getList()
  }, [])
  // 第二个参数为空数组，只会执行一次（若main.jsx中使用严格模式则会执行两次）

  // 3.依赖项不为空，初始调用+依赖项改变时调用
  useEffect(() => {
    console.log('副作用函数执行了2')
  }, [count])
  return (
    <>
      <div style={{ width: '500px', height: '500px', border: '1px solid green' }}>
        <ul>
          {list.map((item) => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
        <button onClick={() => setCount(count + 1)}>{count}</button>
      </div>
    </>
  )
}

export default App
